<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>新增商品</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="{{URL::asset('layui/css/layui.css')}}"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<form class="layui-form" action="">
    <fieldset class="layui-elem-field site-demo-button" style="margin-top: 20px;">
    <legend>基本信息</legend>
        <div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品分类</label>
                <div class="layui-input-block">
                    <select id="classId" name="class_id" lay-filter="aihao">
                        <option value="">请选择分类</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-block">
                    <input type="text" name="goods_name" autocomplete="off" placeholder="商品名称" value="{{$goods['goods_name']}}" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">价格</label>
                <div class="layui-input-block">
                    <input type="text" name="price" value="{{$goods['price']}}" autocomplete="off" placeholder="价格" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮费</label>
                <div class="layui-input-block">
                    <input type="radio" name="is_free_shopping" value="1" title="包邮" @if($goods['express_type']==1)checked=""@endif>
                    <input type="radio" name="is_free_shopping" value="0" title="到付" @if($goods['express_type']==0)checked=""@endif>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品图</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <input type="hidden" id="image" name="image" autocomplete="off" value="{{$goods['image_text']}}" class="layui-input">
                        <button type="button" class="layui-btn" id="test1">选择图片</button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图(点击图片删除):
                            <div class="layui-upload-list" id="demo1">
                                @foreach($goods['banner'] as $item)
                                    <img src="{{$item}}"  class="layui-upload-img" style="width: 80px;height: 80px;margin-left: 8px;border: 1px solid cornflowerblue;" onclick="deleteImage({{$goods['id']}},1,'{{$item}}')">
                                @endforeach
                            </div>
                        </blockquote>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">详情图</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <input type="hidden" id="detail" name="detail" autocomplete="off" value="{{$goods['detail_text']}}" class="layui-input">
                        <button type="button" class="layui-btn" id="test2">选择图片</button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图(点击图片删除):
                            <div class="layui-upload-list" id="demo2">
                                @foreach($goods['detail'] as $item)
                                    <img src="{{$item}}"  class="layui-upload-img" style="width: 80px;height: 80px;margin-left: 8px;border: 1px solid cornflowerblue;" onclick="deleteImage({{$goods['id']}},2,'{{$item}}')">
                                @endforeach
                            </div>
                        </blockquote>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
                    <button type="button" id="close" class="layui-btn layui-btn-primary">取消</button>
                </div>
            </div>
        </div>
    </fieldset>
</form>
<form class="layui-form" action="">
<fieldset class="layui-elem-field site-demo-button" style="margin-top: 20px;">
    <legend>规格信息&nbsp;<button type="button" id="addSku" class="layui-btn layui-btn-normal layui-btn-sm">添加规格</button></legend>
    <script type="text/html" id="barDemo1">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <table class="layui-hide" id="table1" lay-filter="table1"></table>
</fieldset>
</form>
<form class="layui-form" action="">
<fieldset class="layui-elem-field site-demo-button" style="margin-top: 20px;">
    <legend>颜色信息&nbsp;<button type="button" id="addColor" class="layui-btn layui-btn-normal layui-btn-sm">添加颜色</button></legend>
    <script type="text/html" id="barDemo2">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <table class="layui-hide" id="table2" lay-filter="table2"></table>
</fieldset>
</form>
<script src="{{URL::asset('layui/layui.js')}}" charset="utf-8"></script>
<script src="{{URL::asset('js/jquery-3.1.1.min.js')}}"></script>
<script>
    layui.use(['form','upload','table'], function(){
        var form = layui.form
            ,upload = layui.upload
            ,table = layui.table
            ,layer = layui.layer;

        var index = parent.layer.getFrameIndex(window.name);

        table.render({
            elem: '#table1'
            ,url:'/admin/goods/sku/list'
            ,where:{"id":"{{$goods['id']}}"}
            ,cols: [[ //标题栏
                {field: 'id', title: 'ID', sort: true}
                ,{field: 'sku_name', title: '规格昵称'}
                ,{field: 'sku_price', title: '规格价格'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo1', width:150}
            ]]
            //,skin: 'line' //表格风格
            ,even: true
            //,page: true //是否显示分页
            //,limits: [5, 7, 10]
            //,limit: 5 //每页默认显示的数量
        });

        table.render({
            elem: '#table2'
            ,url:'/admin/goods/color/list'
            ,where:{"id":"{{$goods['id']}}"}
            ,cols: [[ //标题栏
                {field: 'id', title: 'ID', sort: true}
                ,{field: 'color_image', title: '颜色图片',templet:function (d) {
                        return '<img src="'+d.color_image+'" width="50px" height="50px" />';
                    }}
                ,{field: 'color_name', title: '颜色名称'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo2', width:150}
            ]]
            //,skin: 'line' //表格风格
            ,even: true
            //,page: true //是否显示分页
            //,limits: [5, 7, 10]
            //,limit: 5 //每页默认显示的数量
        });

        //监听行工具事件
        table.on('tool(table1)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('改操作将永久删除此数据,是否确认?', function(index){
                    $.post('/admin/goods/sku/delete',{"id":data.id},function (d) {
                        if (d.code==200){
                            obj.del();
                            layer.close(index);
                        } else{
                            layer.msg("删除失败");
                        }
                    });

                });
            }
        });

        //监听行工具事件
        table.on('tool(table2)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('改操作将永久删除此数据,是否确认?', function(index){
                    $.post('/admin/goods/color/delete',{"id":data.id},function (d) {
                        if (d.code==200){
                            obj.del();
                            layer.close(index);
                        } else{
                            layer.msg("删除失败");
                        }
                    });

                });
            }
        });


        $('#addSku').click(function () {
            layer.open({
                title:"新增商品规格",
                area:["50%","40%"],
                content:'<fieldset class="layui-elem-field site-demo-button" style="margin-top: 20px;">\n' +
                    '    <legend>商品规格</legend>\n' +
                    '    <div style="margin-top: 10px;" class="sku_div">\n' +
                    '        <div class="layui-form-item">\n' +
                    '            <label class="layui-form-label">规格</label>\n' +
                    '            <div class="layui-input-inline">\n' +
                    '                <input type="text" id="sku_name" autocomplete="off" placeholder="规格名称" class="layui-input">\n' +
                    '            </div>\n' +
                    '            <div class="layui-input-inline">\n' +
                    '                <input type="text" id="sku_price" autocomplete="off" placeholder="价格" class="layui-input">\n' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '</fieldset>',
                btn:["保存","取消"],
                yes:function () {
                    var sku_name = $('#sku_name').val();
                    var sku_price = $('#sku_price').val();
                    var url = "/admin/goods/sku/add";
                    var where = {"goods_id":"{{$goods['id']}}","sku_price":sku_price,"sku_name":sku_name};
                    $.post(url,where,function (d) {
                        if (d.code==200){
                            layer.msg("商品规格添加成功");
                            setTimeout(function () {
                                window.location.reload();
                            },500);
                        }else{
                            layer.msg("商品规格添加失败");
                        }
                    });
                }
            });
        });
        $('#addColor').click(function () {
            layer.open({
                title:"新增商品颜色",
                area:["50%","40%"],
                content:'<fieldset class="layui-elem-field site-demo-button" style="margin-top: 20px;">\n' +
                    '    <legend>商品颜色</legend>\n' +
                    '    <div style="margin-top: 10px;" class="color_div">\n' +
                    '        <div class="layui-form-item">\n' +
                    '            <label class="layui-form-label">颜色</label>\n' +
                    '            <div class="layui-input-inline">\n' +
                    '                <input type="text" id="color_name" autocomplete="off" placeholder="颜色名称" class="layui-input">\n' +
                    '            </div>\n' +
                    '            <div class="layui-input-inline">\n' +
                    '                <input type="file" id="files" autocomplete="off"  class="layui-input">\n' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '</fieldset>',
                btn:["保存","取消"],
                yes:function () {
                    var color_name = $('#color_name').val();
                    var image = $("#files").get(0).files[0];

                    var formdata = new FormData();
                    formdata.append("goods_id","{{$goods['id']}}");
                    formdata.append("color_name",color_name);
                    formdata.append("files",image);

                    var url = "/admin/goods/color/add";

                    $.ajax({
                        url: url,
                        type: "POST",
                        dataType: "json",
                        data: formdata,
                        async: false,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function (d) {
                            if (d.code==200){
                                layer.msg("商品颜色添加成功");
                                setTimeout(function () {
                                    window.location.reload();
                                },500);
                            }else{
                                layer.msg("商品颜色添加失败");
                            }
                        },
                    });
                }
            });
        });

        


        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 1){
                    return '必填项不能为空';
                }
            }
        });

        //商品类型
        goodsTypeList();


        //单图片上传
        upload.render({
            elem: '#test1'
            ,url: '/admin/upload'
            ,field:'files'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 80px;height: 80px;">')
                });
            }
            ,done: function(res){
                var image = $('#image').val();
                if (res.code==200){
                    var image = image+','+res.data.image;
                    $('#image').val(image);
                }
            }
        });

        //单图片上传
        upload.render({
            elem: '#test2'
            ,url: '/admin/upload'
            ,field:'files'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 80px;height: 80px;">')
                });
            }
            ,done: function(res){
                var image = $('#detail').val();
                if (res.code==200){
                    var image = image+','+res.data.image;
                    $('#detail').val(image);
                }
            }
        });

        //选完文件后不自动上传
        upload.render({
            elem: '#test8'
            ,url: '/admin/upload'
            ,field:'files'
            ,auto: false
            ,bindAction: '#test9'
            ,done: function(res){
                var color_name = $('#color_name').val();
                var color = $('#color_info');
                var str = color.val()+','+color_name+'|&|'+res.data.image;
                color.val(str);
                $('#color_block').append('<span style="margin-left: 5px;" class="layui-badge layui-bg-blue">'+color_name+'</span>');
                $('#color_name').val('');
                $('#color').hide();
            }
        });

        //监听提交
        form.on('submit(demo1)', function(data){
            var f = data.field;
            var where = {"id":"{{$goods['id']}}","class_id":f.class_id,"goods_name":f.goods_name,"is_free_shopping":f.is_free_shopping,"price":f.price,"image":f.image,"detail":f.detail};
            var url = "/admin/goods/list/edit";
            $.post(url,where,function (d) {
                if (d.code==200){
                    layer.msg("商品编辑成功!");
                    setTimeout(function () {
                        window.parent.location.reload();
                    },500)
                }else{
                    layer.msg("商品编辑失败!");
                }
            });

            return false;
        });

        function goodsTypeList() {
            var url = "/admin/class/list/api";
            var where = {"page":1,"limit":50};
            $.get(url,where,function (d) {
                if (d.count>0){
                    $.each(d.data,function (i,v) {
                        if (v.id=="{{$goods['class_id']}}"){
                            var jd = '<option value="'+v.id+'" selected>'+v.class_name+'</option>';
                        }else {
                            var jd = '<option value="' + v.id + '">' + v.class_name + '</option>';
                        }
                        $('#classId').append(jd);
                    });
                }
                form.render('select');
            });
        }

        window.deleteImage=function(id,type,image){
            $.post('/admin/goods/image/delete',{"id":id,"type":type,"image":image},function (d) {
                if (d.code==200) {
                    $('img[src="'+image+'"]').remove();
                    window.location.reload();
                }else{
                    layer.msg("删除失败");
                }
            });
        }


        $('#close').click(function(){
            parent.layer.close(index);
        });
    });
</script>

</body>
</html>